<template>
    <v-app class="resetPassword">
        <div class="top-menu">
            <div class="logo-container">
            </div>
            <div class="name">
                教学信息管理系统
            </div>
        </div>
        <v-stepper v-model="step" :items="items" hide-actions class="stepper">
            <template v-slot:[`item.1`]>
                <div style="margin-left: 10%;margin-right: 10%; margin-top: 5%;">
                    <v-text-field clearable v-model="email" label="注册邮箱" prepend-icon="mdi-email-outline" variant="outlined"
                        :rules="[rules.required, rules.verifyEmail]"></v-text-field>
                </div>
                <div style="margin-top: 5%; display: flex; margin-left: 10%; margin-right: 10%;">
                    <div style="width: 80%;">
                        <v-text-field clearable v-model="code" label="请输入验证码" prepend-icon="mdi-lock-outline"
                            variant="outlined" maxlength="6">
                        </v-text-field>
                    </div>
                    <div style="margin-top: 2%; margin-left: 5%;">
                        <v-btn variant="tonal" @click="onShow" v-if="time == 0" style="font-size: small;" color="blue"
                            size="large">
                            发送验证码
                        </v-btn>
                        <Vcode :show="isShow" @success="onSuccess" @close="onClose" v-if="time == 0" />
                        <v-btn :disabled="true" v-else>{{ time }}s</v-btn>
                    </div>
                </div>
                <div style="display: flex;flex-direction: row-reverse; margin-top: 5%;">
                    <div class="button1" @click="next" :disabled="disabled">
                        <span>
                            下一步
                        </span>
                    </div>
                    <div style="margin-right: 50%;" class="button1" @click="handle" :disabled="disabled">
                        <span>
                            返回登录
                        </span>
                    </div>
                </div>
            </template>
            <template v-slot:[`item.2`]>
                <div style="margin-top: 5%;">
                    <div style="margin-left: 15%;margin-right: 12%; margin-top: 5%;">
                        <v-text-field v-model="password" :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
                            :rules="[rules.required, rules.verifyPassword]" :type="show ? 'text' : 'password'" label="新密码"
                            @click:append="show = !show" variant="outlined">
                        </v-text-field>
                    </div>
                    <div style="margin-top: 5%;margin-left: 15%;margin-right: 12%;">
                        <v-text-field v-model="confirmation" :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
                            :rules="[rules.required]" :type="show ? 'text' : 'password'" label="请再次输入新密码"
                            @click:append="show = !show" variant="outlined">
                        </v-text-field>
                    </div>
                    <div style="display: flex;justify-content: center;align-items: center; margin-top: 5%;">
                        <div class="button1" @click="next" :disabled="disabled">
                            <span>
                                下一步
                            </span>
                        </div>
                    </div>
                </div>
            </template>
            <template v-slot:[`item.3`]>
                <div style="margin-top: 5%;">
                    <div style="text-align: center;">
                        <p style="width: 100%;font-size:large;color: #f90404;">(o^▽^o)恭喜你，重置完成！</p>
                    </div>
                    <div style="display: flex;justify-content: center;align-items: center;margin-top: 10%;">
                        <button class="button2" @click="handle" style="margin: 0 auto;"><span>前往登录</span></button>
                    </div>
                </div>
            </template>
        </v-stepper>
    </v-app>
</template>

<script setup lang="ts">
import { ref } from "vue"
import router from "@/router"
import { SendMailVerificationCode, UpdatePassword } from "@/controllers/authController"
import { verifyEmail, verifyPassword } from "@/utils/verification"
import Vcode from "vue3-puzzle-vcode"
import { message } from '@/utils/message'
let step = ref(1), time = ref(0), email = ref(''), code = ref(''), password = ref(''), confirmation = ref(''), disabled = false, isShow = ref(false), show = ref(false)
const rules = {
    required: (value: any) => !!value || '此项必填',
    verifyEmail: (value: any) => verifyEmail(value) || '邮箱格式不正确',
    verifyPassword: (value: any) => verifyPassword(value) || '密码应为至少六位数字字母或下划线组成！'
}
const items = [
    '邮箱验证',
    '密码重置',
    '重置完成',
]
function countdown() {
    if (time.value > 0) {
        time.value--
        setTimeout(countdown, 1000)
    }
}
async function next() {
    if (step.value === 1) {
        if (email.value === '') {
            message("未输入邮箱！")
            return
        }
        if (code.value === '') {
            message("未输入验证码！")
            return
        }
        step.value++;
        return
    }
    if (step.value === 2) {
        if (password.value === '') {
            message("未输入新密码！")
            return
        } else if (!verifyPassword(password.value)) {
            message("密码格式不正确")
            return
        } else if (!(confirmation.value === password.value)) {
            message("两次输入密码不一致！")
            return
        }
        try {
            await UpdatePassword(code.value, email.value, password.value);
            message("密码重置成功！", 'success')
            step.value++
        } catch (error: any) {
            message(error.message, 'error')
            step.value = 0
        }
    }
}
function handle() {
    router.push('/Login')
}
function onShow() {
    if (!verifyEmail(email.value)) {
        message("邮箱格式不正确")
        return
    }
    isShow.value = true
}
async function onSuccess() {
    try {
        isShow.value = false
        await SendMailVerificationCode(email.value, false)
        message("验证码发送成功")
        time.value = 60
        countdown()
    } catch (error: any) {
        message(error.message, 'error')
    }
}
function onClose() {
    isShow.value = false
}
</script>

<style scoped>
.top-menu {
    display: flex;
    align-items: center;
    z-index: 1;
}

.logo-container {
    width: 240px;
    height: 120px;
    background-image: url("logo-pc.png");
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 14vh;
}

.name {
    height: 80px;
    border-left: 1px solid white;
    margin-top: 5vh;
    padding-left: 3vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px;
    font-weight: bold;
    user-select: none;
}

.resetPassword {
    background-image: url("reset_background.jpg");
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
    opacity: .7;
}

.action_button {
    width: 20%;
    margin-top: 3%;
    text-align: center;
}

.button1 {
    width: 36%;
    line-height: 46px;
    color: #ffffff;
    font-size: 100%;
    border-radius: 27px;
    text-align: center;
    background-image: linear-gradient(to right, #ff3300 0%, #eb4402 25%, #ffc404 50%, #eb4402 75%, #ff3300 100%);
    background-size: 200%;
    animation: colorGradient 1.5s infinite;
    user-select: none;
    cursor: pointer;
}

@keyframes colorGradient {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100% 0;
    }
}

.button2 {
    display: inline-block;
    border-radius: 15px;
    background-color: #6e79f0;
    border: none;
    color: #ffff;
    text-align: center;
    font-size: 150%;
    font-weight: 400;
    padding: 3%;
    width: 38%;
    transition: all 0.5s;
    cursor: pointer;
    margin-right: -20%;
    margin-bottom: -10%;
    vertical-align: middle;
}

.button2 span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.button2 span::after {
    content: ">";
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}

.button2:hover span {
    padding-right: 30px;
}

.button2:hover span::after {
    opacity: 1;
    right: 0;
}

.stepper {
    margin-top: 5%;
    margin-left: 30%;
    margin-right: 30%;
    opacity: 0.95;
}

.window {
    padding: 10% 20% 10%;
}
</style>